<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
	<title>card</title>
	<style type="text/css">.infinite-scroll-preloader {margin-top:-20px;}</style>
	<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.css">
	<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.js' charset='utf-8'></script>
	<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.js' charset='utf-8'></script>
	<script type="text/javascript" src="utils.js"></script>
</head>
<body>
	<div class="page-group">
		<!-- 单个page ,第一个.page默认被展示-->
		<div class="page">
			<header class="bar bar-nav" style="background: rgb(57,117,157)">
				<h1 class="title">影  视</h1>
			</header>
			<!-- 添加 class infinite-scroll 和 data-distance向下无限滚动可不加infinite-scroll-bottom类，这里加上是为了和下面的向上无限滚动区分-->
			<div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">
				<div class="list-block">
					<ul class="list-container"></ul>
				</div>
				<!-- 加载提示符 -->
				<div class="infinite-scroll-preloader">
					<div class="preloader"></div>
				</div>
			</div>
		</div>
	</div>
	<script>$.init()</script>
	<script type="text/javascript">
		$(function() {
			// 加载flag
			var loading = false;
			// 最多可加载的条目
			var maxItems = 40;

			// 每次加载添加多少条目
			var itemsPerLoad = 8;

			function addItems(number, lastIndex) {
				// 生成新条目的HTML
				var html = '';
				for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
					//请求数据
					// AjaxIO()
					// html += '<li class="item-content"><div class="item-inner"><div class="item-title">Item ' + i + '</div></div></li>';
					//card 模板
					html += '<a href="http://www.baidu.com" >'+
					'<li class="card"><div class="card-header" style="color: black;background:rgb(57,117,157);padding:0;">'+
					'<lable style="display: block;height: 35px;width: 100%;text-align: center;font-size: 18px;font-weight:550;color: #ffffff;line-height: 35px;">标题'+i+'</lable></div>'+

					'<div class="card-content" style="padding:0;"><img src="'+"http://ac-EYUJxAnb.clouddn.com/3eb3d7e81b9058d0.jpg"+'" style="width: 100%;"></div>'+

					'<div class="card-footer" style="padding:0;">'+
					'<lable style="display: inline-block;margin-top: 15px;margin-bottom: 0;float: left;font-size: 16px;vertical-align: bottom;">'+i+'</lable>'+
					'<lable style="display: inline-block;margin-top: 15px;margin-bottom: 0;float: right;width: 80px;text-align: left;font-size: 14px;vertical-align: bottom;color:orange;">'+i+'</lable>'+
					'</div></li></a>';
				}
				// 添加新条目
				$('.infinite-scroll-bottom .list-container').append(html);

			}
			//预先加载20条
			addItems(itemsPerLoad, 0);

			// 上次加载的序号

			var lastIndex = 8;

			// 注册'infinite'事件处理函数
			$(document).on('infinite', '.infinite-scroll-bottom',function() {

				// 如果正在加载，则退出
				if (loading) return;

				// 设置flag
				loading = true;

				// 模拟1s的加载过程
				setTimeout(function() {
					// 重置加载flag
					loading = false;

					if (lastIndex >= maxItems) {
						// 加载完毕，则注销无限加载事件，以防不必要的加载
						$.detachInfiniteScroll($('.infinite-scroll'));
						// 删除加载提示符
						$('.infinite-scroll-preloader').remove();
						return;
					}

					// 添加新条目
					addItems(itemsPerLoad, lastIndex);
					// 更新最后加载的序号
					lastIndex = $('.list-container li').length;
					//容器发生改变,如果是js滚动，需要刷新滚动
					$.refreshScroller();
				}, 1000);
			});
		})
	</script>
</body>
</html>